<template>
  <div class="home">
    <h3>{{ obj.name }}</h3>
    <h3>{{ obj.age }}</h3>
    <button @click="updateData">update name age</button>
    <hr />
    <ul>
      <li v-for="(item, index) in list" :key="index">{{ item }}</li>
    </ul>
    <button @click="addItem">动态添加数组元素</button>
    <hr />
    <h3>商品名称:{{ goodsname }}</h3>
    <h3>商品价格:{{ price }}</h3>
    <h3>商品数量:{{ num }}</h3>
    <button @click="updateGoods">更新商品数据</button>
    <hr>
    <h3>{{count}}</h3>
    <button @click="updateCount">update count</button>
    <!-- 接收父组件传递的视图结构 -->
    <slot />
  </div>
</template>

<script>
// 导入reactive
import { reactive,toRefs,ref,onMounted,onUpdated } from "vue";
export default {
  props:['msg','style','class'],
  // props: 系统参数
  // context: 系统参数
  setup(props,context) {

    onMounted(()=>{
      console.log('组件挂载完成');
    });

    onUpdated(()=>{
      console.log('组件更新完成');
    });

    console.log(props,context);
    console.log(context.slots.default());

    // 触发一个自定义事件message
    // context.emit('自定义事件名称','要发送的数据');
    context.emit('message','hello composition api');

    // 基于基本数据类型创建响应式数据
    const count=ref(0);

    // 创建一个响应式数据对象
    const obj = reactive({
      name: "jack",
      age: 20,
    });
    // 基于数据创建响应式数据对象
    const list = reactive(["vue", "react", "angular"]);

    // const { goodsname, price, num } = reactive({
    //   goodsname: "苹果",
    //   price: 5,
    //   num: 100,
    // });

    const goods = toRefs(reactive({
      goodsname: "苹果",
      price: 5,
      num: 100,
    }));

    return {
      count,
      //   goodsname,
      //   price,
      //   num,
      ...goods,
      obj,
      list,
      // 更新数据的方法
      updateData() {
        this.obj.name = "rose";
        this.obj.age = 30
      },
      addItem() {
        this.list.push("微信小程序");
      },
      updateGoods() {
        this.goodsname = "香蕉";
        this.price = 6;
        this.num = 300;
        console.log(this.goodsname);
      },
      updateCount(){
        this.count+=1;
      }
    };
  },
};
</script>

<style>
.home{
    background: #EEE;
    margin:10px 0;
    padding: 10px;
}
</style>